<script>
import UReminder from '@/components/u-reminder.vue';
import * as echarts from 'echarts';
import UEchart from '@/components/u-echerts.vue';
import UPopup from '@/components/u-popup.vue';
import UConfirm from '@/components/u-confirm.vue';

export default {
  name: 'node',
  components: { UConfirm, UPopup, UEchart, UReminder },
  data() {
    return {
      activeName2: 'd',
      currentRate: 0,
      currentRate2: 0,
      show: false,
      barOptions: {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}'  // 设置tooltip的内容
        },
        grid: {
          top: '10%',
          bottom: '15%',  // 调整底部留白，确保图表不会被遮挡
          right: '10%',
          left: '5%',
          containLabel: true
        },
        legend: {
          data: ['上行', '下行'],  // 图例显示两条线的名称
          bottom: '2%',  // 设置图例距离底部的距离
          itemHeight: 8,  // 图例图形的高度
          itemWidth: 20,  // 图例图形的宽度
          textStyle: {
            fontSize: 12,
            color: '#999999'
          },
          selectedMode: 'multiple',  // 允许多选，点击显示/隐藏线条
          itemGap: 20,  // 设置图例项之间的间距
          padding: [10, 0, 10, 0]  // 设置图例的内边距，顶部和底部留空，确保不和图表重叠
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999999'
            }
          },
          axisTick: {
            show: true,
            inside: true
          },
          axisLabel: {
            fontSize: 12,
            color: '#999999',
            margin: 10
          },
          data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999999'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#ccc'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 10,
            color: '#999999',
            margin: 10
          }
        },
        series: [
          {
            name: '上行',  // 修改为中文名称
            data: [10, 16, 42, 38, 78, 90, 67, 90],
            type: 'line',
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#fca079' },
                  { offset: 1, color: 'rgba(252, 160, 121,0)' }
                ]
              )
            },
            lineStyle: {
              width: 3,
              color: '#ff5f1b'
            },
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              color: 'white',
              borderColor: '#ff5f1b',
              borderWidth: 3
            }
          },
          {
            name: '下行',  // 修改为中文名称
            data: [12, 20, 38, 46, 60, 72, 85, 90],
            type: 'line',
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#62dc92' },
                  { offset: 1, color: 'rgba(98, 220, 146,0)' }
                ]
              )
            },
            lineStyle: {
              width: 3,
              color: '#10d860'
            },
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              color: 'white',
              borderColor: '#10d860',
              borderWidth: 3
            }
          }
        ]
      },
      barOptions2: {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}'  // 设置tooltip的内容
        },
        grid: {
          top: '10%',
          bottom: '15%',  // 调整底部留白，确保图表不会被遮挡
          right: '10%',
          left: '5%',
          containLabel: true
        },
        legend: {
          data: ['上行', '下行'],  // 图例显示两条线的名称
          bottom: '2%',  // 设置图例距离底部的距离
          itemHeight: 8,  // 图例图形的高度
          itemWidth: 20,  // 图例图形的宽度
          textStyle: {
            fontSize: 12,
            color: '#999999'
          },
          selectedMode: 'multiple',  // 允许多选，点击显示/隐藏线条
          itemGap: 20,  // 设置图例项之间的间距
          padding: [10, 0, 10, 0]  // 设置图例的内边距，顶部和底部留空，确保不和图表重叠
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999999'
            }
          },
          axisTick: {
            show: true,
            inside: true
          },
          axisLabel: {
            fontSize: 12,
            color: '#999999',
            margin: 10
          },
          data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999999'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#ccc'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 10,
            color: '#999999',
            margin: 10
          }
        },
        series: [
          {
            name: '上行',  // 修改为中文名称
            data: [10, 16, 42, 38, 78, 90, 67, 90],
            type: 'line',
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#fca079' },
                  { offset: 1, color: 'rgba(252, 160, 121,0)' }
                ]
              )
            },
            lineStyle: {
              width: 3,
              color: '#ff5f1b'
            },
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              color: 'white',
              borderColor: '#ff5f1b',
              borderWidth: 3
            }
          },
          {
            name: '下行',  // 修改为中文名称
            data: [12, 20, 38, 46, 60, 72, 85, 90],
            type: 'line',
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#62dc92' },
                  { offset: 1, color: 'rgba(98, 220, 146,0)' }
                ]
              )
            },
            lineStyle: {
              width: 3,
              color: '#10d860'
            },
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              color: 'white',
              borderColor: '#10d860',
              borderWidth: 3
            }
          }
        ]
      },
      active: 0,
      remark: '',
      showEdit: false,
      showChange: false,
      activeGroup: 0,
      showDel: false,
    }
      ;
  },
  methods: {
    changeActive(index) {
      this.active = index;
    },
    closeEdit() {
      this.showEdit = false;
    },
    confirmEdit() {
      this.showEdit = false;
    },
    closeChange() {
      this.showChange = false;
    },
    confirmChange() {
      this.showChange = false;
    },
    changeActiveGroup(index) {
      this.activeGroup = index;
    },
    closeDel() {
      this.showDel = false;
    },
    confirmDel() {
      this.showDel = false;
    },
    goPage(url) {
      this.$router.push(url);
    }
  },
  computed: {
    text() {
      return this.currentRate.toFixed(0) + '%';
    },
    text2() {
      return this.currentRate2.toFixed(0) + '%';
    }
  }
};
</script>

<template>
  <frame-view class="index">
    <div style="padding: 0 20px">

      <div style="display: flex;align-items: center;justify-content: space-between;padding: 0 20px">
        <div style="display: flex;align-items: center;">
          <p
            @click="showEdit = true">
            节点名称测
          </p>
          <img src="./image/icon-编辑@2x.png" alt="icon" style="width: 36px;height: 36px;margin-left: 10px" />
        </div>
        <div style="display: flex;align-items: center;color: #222" @click="showDel = true">
          <img src="./image/icon-移除@2x.png" alt="icon" style="width: 36px;height: 36px;" />
          <p style="margin-left: 10px">
            移除节点
          </p>
        </div>

      </div>
      <div style="display: flex;align-items: center;color: #222;margin-top: 28px;padding-left: 20px">
        <p style="font-size: 24px;color: #999999;">
          节点ID(PSN)：32_wkz_b40e48f5c2974582-psn
        </p>
        <img src="./image/icon-复制@2x.png" alt="icon" style="width: 36px;height: 36px" />
      </div>
      <div style="background-color: #fff;border: 1px solid rgba(24,105,255,0.8);border-radius: 20px;margin-top: 32px">
        <div
          style="height: 128px;background: rgba(24,105,255,0.12);;display: flex;align-items: center;justify-content: space-evenly;padding: 20px;text-align: center">

          <div>
            <p style="font-weight: bold;font-size: 40px;color: #333333;text-align: center"><span
              style="font-size: 28px;">￥</span>407.19
            </p>
            <p style="font-weight: 400;font-size: 24px;color: #A8A8A8;">总收益</p>
          </div>
          <div style="display: inline-flex;height: 100%;border-right: #000000 1px solid;opacity: 0.16;"></div>
          <div>
            <p style="font-weight: bold;font-size: 40px;color: #333333;text-align: center"><span
              style="font-size: 28px;">￥</span>407.19
            </p>
            <p style="font-weight: 400;font-size: 24px;color: #A8A8A8;">昨日收益</p>
          </div>
          <div style="display: inline-flex;height: 100%;border-right: #000000 1px solid;opacity: 0.16;"></div>
          <div>
            <p style="font-weight: bold;font-size: 40px;text-align: center">42</p>
            <p style="font-weight: 400;font-size: 24px;color: #A8A8A8;">连续在线(天)</p>
          </div>

        </div>
        <div style="padding: 24px">
          <div style="display: flex;justify-content: space-between">
            <p style="font-weight: 400;font-size: 28px;color: #5e5e5e;line-height: 40px;height: 40px">业务类型</p>
            <p style="font-size: 28px;">
              Q1
              <van-icon name="arrow" style="color: #999999" />
            </p>
          </div>
          <div style="display: flex;justify-content: space-between;margin-top: 20px" @click="showChange = true">
            <p style="font-weight: 400;font-size: 28px;color: #5e5e5e;line-height: 40px;height: 40px">所属分组</p>
            <p style="font-size: 28px;">
              默认分组
              <van-icon name="arrow" style="color: #999999" />
            </p>
          </div>
          <div style="display: flex;justify-content: space-between;margin-top: 20px">
            <p style="font-weight: 400;font-size: 28px;color: #5e5e5e;line-height: 40px;height: 40px">节点状态</p>
            <p style="font-size: 28px;" @click="goPage('/equipment/ai')">
              <span style="color: #FFBA1F">可优化</span>
              <van-icon name="arrow" style="color: #999999" />
            </p>
          </div>
          <div style="display: flex;justify-content: space-between;margin-top: 20px">
            <p style="font-weight: 400;font-size: 28px;color: #5e5e5e;line-height: 40px;height: 40px">绑定时间</p>
            <p style="font-size: 28px;">
              2024年10月18日
            </p>
          </div>

        </div>
      </div>
    </div>
    <van-tabs :line-width="50" background=" rgba(0,0,0,0)" title-inactive-color="#191919" title-active-color="#191919"
              :color="'rgb(15,106,250,.8)'"
              v-model="activeName2">
      <van-tab title="收益记录" name="a">
        <div style="background-color: #fff;border-radius: 20px 20px 0 0 ;padding: 0 23px 40px;width: 100vw;">
          <div style="font-size: 24px;padding-top: 20px" v-for=" i in 10">
            <div style="display: flex;justify-content: space-between">
              <p style="color: #000;font-weight: bold">贡献宽带 42.53M</p>
              <p style="font-size: 40px;color: #FF1212">+980.00</p>
            </div>
            <div
              style="display: flex;justify-content: space-between;margin-top: 16px;color: #999999;padding-bottom: 25px;border-bottom: 1px solid #e3e3e3">
              <p>2024年1月28日</p>
              <p>交易类型</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="基础信息" name="b">
        <div style="background-color: #fff;border-radius: 20px 20px 0 0 ;padding: 0 23px 40px;width: 100vw">
          <div style="font-size: 28px;padding-top: 20px">
            <div
              style="display: flex;justify-content: space-between;margin-top: 16px;padding-bottom: 25px;border-bottom: 1px solid #e3e3e3">
              <p style="color: #999999;">备注</p>
              <p style="display: flex;align-items: center">测
                <img src="./image/icon-复制@2x.png" alt="icon" style="width: 24px;height: 24px;margin-left: 10px" />
              </p>
            </div>
          </div>
          <div style="font-size: 28px;padding-top: 20px">
            <div
              style="display: flex;justify-content: space-between;margin-top: 16px;padding-bottom: 25px;border-bottom: 1px solid #e3e3e3">
              <p style="color: #999999;">运营商</p>
              <p style="display: flex;align-items: center">电信</p>
            </div>
          </div>
          <div style="font-size: 28px;padding-top: 20px">
            <div
              style="display: flex;justify-content: space-between;margin-top: 16px;padding-bottom: 25px;border-bottom: 1px solid #e3e3e3">
              <p style="color: #999999;">NAT运营商</p>
              <p style="display: flex;align-items: center">nat1</p>
            </div>
          </div>
          <div style="font-size: 28px;padding-top: 20px">
            <div
              style="display: flex;justify-content: space-between;margin-top: 16px;padding-bottom: 25px;border-bottom: 1px solid #e3e3e3">
              <p style="color: #999999;">盒子IP</p>
              <p style="display: flex;align-items: center">192.168.1.6
                <img src="./image/icon-复制@2x.png" alt="icon" style="width: 24px;height: 24px;margin-left: 10px" />
              </p>
            </div>
          </div>
          <div style="font-size: 28px;padding-top: 20px">
            <div
              style="display: flex;justify-content: space-between;margin-top: 16px;padding-bottom: 25px;border-bottom: 1px solid #e3e3e3">
              <p style="color: #999999;">外网IP</p>
              <p style="display: flex;align-items: center">111.121.45.39</p>
            </div>
          </div>
          <div style="font-size: 28px;padding-top: 20px">
            <div
              style="display: flex;justify-content: space-between;margin-top: 16px;padding-bottom: 25px;border-bottom: 1px solid #e3e3e3">
              <p style="color: #999999;">是否开启 upnp </p>
              <p style="display: flex;align-items: center">nat1</p>
            </div>
          </div>
          <div style="font-size: 28px;padding-top: 20px">
            <div
              style="display: flex;justify-content: space-between;margin-top: 16px;padding-bottom: 25px;border-bottom: 1px solid #e3e3e3">
              <p style="color: #999999;">IPv6</p>
              <p style="display: flex;align-items: center">已开启</p>
            </div>
          </div>
          <div style="font-size: 28px;padding-top: 20px">
            <div
              style="display: flex;justify-content: space-between;margin-top: 16px;padding-bottom: 25px;border-bottom: 1px solid #e3e3e3">
              <p style="color: #999999;">宽带绑定电话 </p>
              <input placeholder="请输入"
                     style="width: 300px; text-align: right; border: none;" />
            </div>
          </div>
          <div style="font-size: 28px;padding-top: 20px">
            <div
              style="display: flex;justify-content: space-between;margin-top: 16px;padding-bottom: 25px;border-bottom: 1px solid #e3e3e3">
              <p style="color: #999999;">装机地址</p>
              <input placeholder="请输入"
                     style="width: 300px; text-align: right; border: none;" />

            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="跑量监控" name="c">
        <div style="background-color: #fff;border-radius: 20px 20px 0 0 ;padding: 0 23px 40px;width: 100vw">
          <div style="display: flex;padding: 30px">
            <div :class="['ECharts_bottom',active===0?'active':'']" @click="changeActive(0)">
              七日内
            </div>
            <div :class="['ECharts_bottom',active===1?'active':'']" @click="changeActive(1)">

              30日内
            </div>
            <div :class="['ECharts_bottom',active===2?'active':'']" @click="changeActive(2)">
              90日内
            </div>
          </div>
          <p style="font-size: 24px;color: #222222;margin-left: 28px">跑量(mbps)</p>
          <div style="width: 750px;height: 480px;margin: auto;padding-bottom: 20px">
            <u-echart :option="barOptions" />
          </div>
          <p style="font-size: 24px;color: #222222;margin-left: 28px;margin-top: 20px">使用率(%)</p>
          <div style="width: 750px;height: 480px;margin: auto;padding-bottom: 20px">
            <u-echart :option="barOptions2" />
          </div>

          <div
            style="width: 686px;border-radius: 32px; height: 64px;background-color: #ffecec;margin: 30px auto 30px;padding:0 20px;display: flex;align-items: center;justify-content: space-between;font-size: 26px;">
            <p style="color: #FF1212">
              <van-icon name="warning-o" />
              设备重传率过高,重传率为6.69
            </p>
            <p>
              可优化
              <van-icon name="arrow" style="color: #999999" />
            </p>

          </div>

        </div>
      </van-tab>
      <van-tab title="硬件信息" name="d">
        <div style="background-color: #fff;border-radius: 20px 20px 0 0 ;padding: 0 23px 40px;width: 100vw;">
          <div style="display: flex;justify-content: space-around;padding-top: 80px">
            <div>
              <van-circle size="80px" stroke-width="80" layer-color="#e3f7ec" color="#15bf63" v-model="currentRate"
                          :rate="30" :speed="100" :text="text" />
              <p style="text-align: center;margin-top: 24px">CPU：4核</p>
            </div>
            <div>
              <van-circle size="80px" stroke-width="80" layer-color="#dae7ff" color="var(--primary-color)" v-model="currentRate2"
                          :rate="70" :speed="100" :text="text2" />
              <p style="text-align: center;margin-top: 24px">内容：4GB</p>
            </div>

          </div>

          <div style="margin-left: 46px">
            <van-progress stroke-width="30" style="border-radius:30px;margin-top: 60px" :show-pivot="false"
                          pivot-text="橙色" color="var(--primary-color)"
                          :percentage="25" />
            <p style="font-size: 28px;margin-top: 20px">内置磁盘：45.81GB / 112GB</p>
            <p style="font-size: 28px;margin-top: 48px">磁盘类型：emmc</p>

          </div>
        </div>
      </van-tab>
    </van-tabs>
    <u-reminder position="center" :show="show" @close="show = false" title="温馨提示">
      <div
        style="font-weight: 400;width: 518px;margin: auto;line-height: 40px;padding: 28px 0 48px;font-size: 28px;color: #585858;">
        首次绑定的新节点需要10~30分钟的数据同步时间，期间您可以自行配置NAT类型，绑定DMZ配置，若已完成此操作请忽略，耐心等待...
      </div>
    </u-reminder>
    <!--编辑-->
    <u-popup title="编辑节点备注" :show="showEdit" @close="closeEdit" @confirm="confirmEdit">
      <van-form style="margin-top: 48px;padding-bottom: 76px">
        <van-field
          border
          v-model="remark"
          name="节点备注"
          label="节点备注"
          label-align="right"
          placeholder="节点备注"
        />
      </van-form>
    </u-popup>
    <!--选择节点分组-->
    <u-popup title="节点分组" :show="showChange" @close="closeChange" @confirm="confirmChange">
      <div class="checked">
        <p :class="{'active':activeGroup===0}" @click="changeActiveGroup(0)">
          默认分组
          <van-icon v-if="activeGroup===0" name="success" color="var(--primary-color)" style="float: right" />
        </p>
        <p :class="{'active':activeGroup===1}" @click="changeActiveGroup(1)">
          1号分组
          <van-icon v-if="activeGroup===1" name="success" color="var(--primary-color)" style="float: right" />

        </p>
        <p :class="{'active':activeGroup===2}" @click="changeActiveGroup(2)">
          2号分组
          <van-icon v-if="activeGroup===2" name="success" color="var(--primary-color)" style="float: right" />
        </p>
        <div style="height: 50px"></div>
      </div>
    </u-popup>
    <u-confirm :show-title="false" position="center" :show="showDel" @close="closeDel" @confirm="confirmDel">
      <div style="font-weight: bold;font-size: 32px;color: #262626;;width: 592px;text-align: center;padding: 72px 0  48px ;">
        确人移除该节点吗
      </div>

    </u-confirm>
  </frame-view>

</template>

<style scoped lang="scss">
:deep(.frame-view-content) {
  padding: 0 !important;
}

:deep(.van-tabs__line) {
  top: 46px !important;
}

input::placeholder {
  color: #BBBBBB; /* 你可以选择任何你喜欢的颜色 */
}

.ECharts_bottom {
  margin-left: 20px;
  border-radius: 28px;
  font-size: 24px;
  width: 128px;
  height: 56px;
  background-color: #f4f4f4;
  color: #626262;
  line-height: 56px;
  text-align: center;
  transition: all 0.3s;

  &:first-child {
    margin-left: 0;
  }

  &.active {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    background-color: #e3edff;
  }
}

.checked {
  p {
    margin: 40px 32px 0;
    font-size: 28px;
    color: #5D5D5D;

    &.active {
      color: #222222;
      font-weight: bold;
    }
  }
}
</style>
